<template>
  <!-- <div> -->
  <div class="FunnelView1">
    <div id="funnel1"></div>
  </div>
  <!-- </div> -->
</template>
  
  <script setup lang="ts">
const echart = inject("echart");
let myChart = null;
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
menulist.$subscribe((arg, state) => {
  //需要写在数据变化前面
  // console.log("subscribe", arg, state);
  getData();
});
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  let value = 92;
  let order = "Ⅳ";
  renderEcharts(value, order);
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("funnel1"));
};
const renderEcharts = (value: any, order: any) => {
  myChart.setOption({
    title: [
      {
        text: "满意度",
        x: "center",
        top: "55%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 16,
          fontWeight: "100"
        }
      },
      {
        text: Math.floor(Math.random() * 90) + 10 + "%",
        x: "center",
        top: "38%",
        textStyle: {
          fontSize: "60",
          color: "#FFFFFF",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600"
        }
      }
    ],
    // backgroundColor: "#111",
    polar: {
      radius: ["42%", "52%"],
      center: ["50%", "50%"]
    },
    angleAxis: {
      max: 100,
      show: false
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 90,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)"
        },
        data: [60],
        coordinateSystem: "polar",

        itemStyle: {
          normal: {
            color: new echart.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#16CEB9"
              },
              {
                offset: 1,
                color: "#6648FF"
              }
            ])
          }
        }
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["56%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE"
        },
        data: [100]
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["38%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE"
        },
        data: [100]
      }
    ]
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>
  
  <style scoped>
.FunnelView1 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#funnel1 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>